package pages

import (
	"github.com/templui/templui/internal/components/badge"
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/calendar"
	"github.com/templui/templui/internal/components/card"
	"github.com/templui/templui/internal/components/checkbox"
	"github.com/templui/templui/internal/components/dialog"
	"github.com/templui/templui/internal/components/form"
	"github.com/templui/templui/internal/components/icon"
	"github.com/templui/templui/internal/components/input"
	"github.com/templui/templui/internal/components/inputotp"
	"github.com/templui/templui/internal/components/progress"
	"github.com/templui/templui/internal/components/radio"
	"github.com/templui/templui/internal/components/selectbox"
	"github.com/templui/templui/internal/components/slider"
	switchcomp "github.com/templui/templui/internal/components/switch"
	"github.com/templui/templui/internal/components/tabs"
	"github.com/templui/templui/internal/components/tagsinput"
	"github.com/templui/templui/internal/components/textarea"
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"time"
)

templ Themes() {
	@layouts.BaseLayout("Themes - templUI", "Pick a Color. Make it yours. Try our hand-picked themes for your next project.") {
		@modules.AnnouncementBar()
		@modules.Navbar()
		<main class="flex-1 overflow-visible">
			<div class="container mx-auto px-4 sm:px-6 lg:px-8">
				<!-- Hero Section -->
				<div class="flex flex-col items-center justify-center py-16 md:py-20">
					<div class="text-center space-y-4 max-w-3xl mx-auto">
						<h1 class="text-4xl md:text-5xl font-semibold tracking-tight">Pick a Color. Make it yours.</h1>
						<p class="text-lg text-muted-foreground max-w-[700px] mx-auto">Try our hand-picked themes. Copy and paste them into your project.</p>
					</div>
				</div>
				<div class="space-y-8">
					<!-- Theme Selector Section -->
					<div class="flex flex-col items-center space-y-6">
						@ThemeSelector()
						<div class="flex items-center gap-4">
							@button.Button(button.Props{
								Variant: button.VariantOutline,
								Attributes: templ.Attributes{
									"data-action": "reset-theme",
								},
							}) {
								@icon.RotateCcw(icon.Props{Size: 14})
								<span class="ml-2">Reset to Default</span>
							}
							@dialog.Trigger(dialog.TriggerProps{
								For: "css-dialog",
							}) {
								@button.Button(button.Props{
									Attributes: templ.Attributes{
										"data-action": "generate-css",
									},
								}) {
									Copy Theme CSS
								}
							}
						</div>
					</div>
					<!-- Component Examples Grid -->
					<div class="w-full">
						@ThemeShowcase()
					</div>
					@dialog.Dialog(dialog.Props{
						ID: "css-dialog",
					}) {
						@dialog.Content(dialog.ContentProps{
							Class: "max-w-xl",
						}) {
							@dialog.Header() {
								@dialog.Title() {
									Generated CSS Code
								}
								@dialog.Description() {
									<div class="flex items-center gap-1.5">
										<div
											class="h-4 w-4 rounded-full"
											data-theme-indicator
										></div>
										<span class="text-sm capitalize" data-theme-text></span>
									</div>
								}
							}
							<pre data-css-display class="p-4 rounded overflow-x-auto max-h-96 bg-muted"></pre>
							@dialog.Footer() {
								@button.Button(button.Props{
									Attributes: templ.Attributes{"data-action": "copy-css"},
								}) {
									Copy to Clipboard
								}
								@dialog.Close(dialog.CloseProps{
									For: "css-dialog",
								}) {
									@button.Button(button.Props{
										Variant: button.VariantSecondary,
									}) {
										Close
									}
								}
							}
						}
					}
				</div>
				@ThemesHandle()
			</div>
		</main>
		@modules.Footer()
	}
}

templ ThemeShowcase() {
	<div
		id="theme-preview"
		class="grid gap-4 md:grid-cols-2 lg:grid-cols-10 xl:grid-cols-11"
	>
		<!-- Left Column - spans more on larger screens -->
		<div class="grid gap-4 auto-rows-min md:col-span-1 lg:col-span-4 xl:col-span-5">
			<!-- Input Fields -->
			@card.Card() {
				@card.Content(card.ContentProps{Class: "p-6 space-y-4"}) {
					<div class="flex flex-col gap-3">
						@form.Label(form.LabelProps{For: "email"}) {
							Email
						}
						@input.Input(input.Props{
							ID:          "email",
							Placeholder: "Enter your email",
							Type:        input.TypeEmail,
						})
					</div>
					<div class="flex flex-col gap-3">
						@form.Label(form.LabelProps{For: "message"}) {
							Message
						}
						@textarea.Textarea(textarea.Props{
							ID:          "message",
							Placeholder: "Type your message here.",
							Rows:        3,
						})
					</div>
				}
			}
			<!-- Action Buttons Card -->
			@card.Card() {
				@card.Header() {
					@card.Title() {
						Save Changes
					}
					@card.Description() {
						Review and save your profile changes
					}
				}
				@card.Content(card.ContentProps{Class: "p-6"}) {
					<div class="flex gap-3 justify-end">
						@button.Button(button.Props{
							Variant: button.VariantOutline,
						}) {
							Cancel
						}
						@button.Button() {
							Save Changes
						}
					</div>
				}
			}
			<!-- Delete Account Card -->
			@card.Card() {
				@card.Header() {
					@card.Title() {
						Danger Zone
					}
					@card.Description() {
						Permanently delete your account and all data
					}
				}
				@card.Content(card.ContentProps{Class: "p-6"}) {
					@button.Button(button.Props{
						Variant: button.VariantDestructive,
						Class:   "w-full",
					}) {
						@icon.Trash(icon.Props{Size: 16})
						<span class="ml-2">Delete Account</span>
					}
				}
			}
			<!-- Social Media Actions Card -->
			@card.Card() {
				@card.Header() {
					@card.Title() {
						Share Article
					}
				}
				@card.Content(card.ContentProps{Class: "p-6"}) {
					<div class="grid grid-cols-2 gap-2">
						@button.Button(button.Props{
							Variant: button.VariantSecondary,
							Class:   "w-full",
						}) {
							@icon.Icon("twitter")(icon.Props{Size: 16})
							<span class="ml-2">Twitter</span>
						}
						@button.Button(button.Props{
							Variant: button.VariantSecondary,
							Class:   "w-full",
						}) {
							@icon.Icon("github")(icon.Props{Size: 16})
							<span class="ml-2">GitHub</span>
						}
						@button.Button(button.Props{
							Variant: button.VariantGhost,
							Class:   "w-full col-span-2",
						}) {
							@icon.Icon("link")(icon.Props{Size: 16})
							<span class="ml-2">Copy Link</span>
						}
					</div>
				}
			}
			<!-- Loading States Card -->
			@card.Card() {
				@card.Header() {
					@card.Title() {
						Processing
					}
				}
				@card.Content(card.ContentProps{Class: "p-6"}) {
					<div class="flex flex-col items-center space-y-4">
						@icon.LoaderCircle(icon.Props{
							Class: "animate-spin size-8 text-primary",
						})
						<p class="text-sm text-muted-foreground">Uploading files...</p>
					</div>
				}
			}
		</div>
		<!-- Middle Column -->
		<div class="grid gap-4 auto-rows-min md:col-span-1 lg:col-span-3">
			<!-- Calendar -->
			@card.Card() {
				{{ threeDaysFromNow := time.Now().AddDate(0, 0, 3) }}
				@card.Content() {
					@calendar.Calendar(calendar.Props{
						Value: &threeDaysFromNow,
					})
				}
			}
			<!-- Go Framework Select -->
			@card.Card() {
				@card.Content(card.ContentProps{Class: "p-6"}) {
					<div class="flex flex-col gap-3">
						@form.Label(form.LabelProps{For: "go-framework"}) {
							Go Framework
						}
						@selectbox.SelectBox() {
							@selectbox.Trigger(selectbox.TriggerProps{
								ID: "go-framework",
							}) {
								@selectbox.Value(selectbox.ValueProps{
									Placeholder: "Select a Go framework",
								})
							}
							@selectbox.Content() {
								@selectbox.Item(selectbox.ItemProps{Value: "echo"}) {
									Echo
								}
								@selectbox.Item(selectbox.ItemProps{Value: "gin"}) {
									Gin
								}
								@selectbox.Item(selectbox.ItemProps{Value: "fiber"}) {
									Fiber
								}
								@selectbox.Item(selectbox.ItemProps{Value: "chi"}) {
									Chi
								}
								@selectbox.Item(selectbox.ItemProps{Value: "gorilla"}) {
									Gorilla Mux
								}
							}
						}
					</div>
				}
			}
			<!-- Status Card with Badges -->
			@card.Card() {
				@card.Header() {
					@card.Title() {
						Project Status
					}
				}
				@card.Content(card.ContentProps{Class: "p-6"}) {
					<div class="space-y-3">
						<div class="flex items-center justify-between">
							<span class="text-sm">Build Status</span>
							@badge.Badge(badge.Props{Variant: badge.VariantDefault}) {
								@icon.Icon("circle-check")(icon.Props{Size: 12})
								<span class="ml-1">Passing</span>
							}
						</div>
						<div class="flex items-center justify-between">
							<span class="text-sm">Environment</span>
							@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) {
								Production
							}
						</div>
						<div class="flex items-center justify-between">
							<span class="text-sm">Version</span>
							@badge.Badge(badge.Props{Variant: badge.VariantOutline}) {
								v2.0.3
							}
						</div>
					</div>
				}
			}
			<!-- OTP Verification Card -->
			@card.Card() {
				@card.Header() {
					@card.Title() {
						Verification Code
					}
					@card.Description() {
						Enter the 6-digit code sent to your email
					}
				}
				@card.Content(card.ContentProps{Class: "p-6"}) {
					<div class="space-y-4">
						@form.Label(form.LabelProps{For: "otp-verification", Class: "sr-only"}) {
							Verification Code
						}
						@inputotp.InputOTP(inputotp.Props{
							ID:    "otp-verification",
							Name:  "verification-code",
							Value: "",
						})
						@button.Button(button.Props{
							Class: "w-full",
						}) {
							Verify
						}
					</div>
				}
			}
		</div>
		<!-- Right Column -->
		<div class="grid gap-4 auto-rows-min md:col-span-2 lg:col-span-3">
			<!-- Sliders & Progress -->
			@card.Card() {
				@card.Content(card.ContentProps{Class: "p-6 space-y-6"}) {
					<div class="flex flex-col gap-3">
						@form.Label(form.LabelProps{For: "volume"}) {
							Volume
						}
						@slider.Slider(slider.Props{ID: "volume"}) {
							@slider.Input(slider.InputProps{
								Min:   0,
								Max:   100,
								Step:  1,
								Value: 50,
							})
						}
					</div>
					<div class="flex flex-col gap-3">
						@form.Label() {
							Upload progress
						}
						@progress.Progress(progress.Props{
							Value: 66,
							Class: "h-2",
						})
					</div>
				}
			}
			<!-- Radio Groups -->
			@card.Card() {
				@card.Content(card.ContentProps{Class: "p-6"}) {
					<div class="space-y-4">
						<h3 class="text-sm font-medium">Select plan</h3>
						<div class="space-y-2">
							<div class="flex items-center space-x-2">
								@radio.Radio(radio.Props{
									ID:         "free",
									Name:       "plan",
									Attributes: templ.Attributes{"checked": "true"},
								})
								@form.Label(form.LabelProps{For: "free"}) {
									Free
								}
							</div>
							<div class="flex items-center space-x-2">
								@radio.Radio(radio.Props{
									ID:   "pro",
									Name: "plan",
								})
								@form.Label(form.LabelProps{For: "pro"}) {
									Pro
								}
							</div>
							<div class="flex items-center space-x-2">
								@radio.Radio(radio.Props{
									ID:   "enterprise",
									Name: "plan",
								})
								@form.Label(form.LabelProps{For: "enterprise"}) {
									Enterprise
								}
							</div>
						</div>
					</div>
				}
			}
			<!-- Switches & Checkboxes -->
			@card.Card() {
				@card.Content(card.ContentProps{Class: "p-6 space-y-4"}) {
					<div class="flex items-center justify-between">
						@form.Label(form.LabelProps{For: "notifications"}) {
							Notifications
						}
						@switchcomp.Switch(switchcomp.Props{
							ID:      "notifications",
							Checked: true,
						})
					</div>
					<div class="flex items-center justify-between">
						@form.Label(form.LabelProps{For: "marketing"}) {
							Marketing emails
						}
						@switchcomp.Switch(switchcomp.Props{ID: "marketing"})
					</div>
					<div class="border-t pt-4">
						<div class="space-y-2">
							<div class="flex items-center space-x-2">
								@checkbox.Checkbox(checkbox.Props{
									ID:      "terms",
									Checked: true,
								})
								@form.Label(form.LabelProps{For: "terms"}) {
									Accept terms
								}
							</div>
							<div class="flex items-center space-x-2">
								@checkbox.Checkbox(checkbox.Props{ID: "privacy"})
								@form.Label(form.LabelProps{For: "privacy"}) {
									Privacy policy
								}
							</div>
						</div>
					</div>
				}
			}
			<!-- Tags Input Card -->
			@card.Card() {
				@card.Header() {
					@card.Title() {
						Project Tags
					}
					@card.Description() {
						Add tags to categorize your project
					}
				}
				@card.Content(card.ContentProps{Class: "p-6"}) {
					@form.Label(form.LabelProps{For: "project-tags", Class: "sr-only"}) {
						Project Tags
					}
					@tagsinput.TagsInput(tagsinput.Props{
						ID:          "project-tags",
						Name:        "tags",
						Placeholder: "Add a tag",
						Value:       []string{"frontend", "react", "typescript"},
					})
				}
			}
			<!-- Tabs Navigation Card -->
			@card.Card() {
				@card.Content(card.ContentProps{Class: "p-6"}) {
					@tabs.Tabs() {
						@tabs.List() {
							@tabs.Trigger(tabs.TriggerProps{Value: "account", IsActive: true}) {
								Account
							}
							@tabs.Trigger(tabs.TriggerProps{Value: "security"}) {
								Security
							}
							@tabs.Trigger(tabs.TriggerProps{Value: "billing"}) {
								Billing
							}
						}
						@tabs.Content(tabs.ContentProps{Value: "account", IsActive: true}) {
							<div class="space-y-2 mt-4">
								<h4 class="text-sm font-medium">Account Settings</h4>
								<p class="text-sm text-muted-foreground">Manage your account preferences and profile information.</p>
							</div>
						}
						@tabs.Content(tabs.ContentProps{Value: "security"}) {
							<div class="space-y-2 mt-4">
								<h4 class="text-sm font-medium">Security Settings</h4>
								<p class="text-sm text-muted-foreground">Configure two-factor authentication and manage sessions.</p>
							</div>
						}
						@tabs.Content(tabs.ContentProps{Value: "billing"}) {
							<div class="space-y-2 mt-4">
								<h4 class="text-sm font-medium">Billing Information</h4>
								<p class="text-sm text-muted-foreground">View and manage your subscription and payment methods.</p>
							</div>
						}
					}
				}
			}
		</div>
	</div>
}

templ ThemeSelector() {
	<div class="flex gap-2 justify-center">
		<button
			class="h-6 w-6 rounded-full transition-all hover:scale-110 relative flex items-center justify-center"
			style="background-color: oklch(0.205 0 0);"
			data-theme="default"
			title="Default"
		>
			<span class="absolute inset-0 flex items-center justify-center">
				<span class="h-2 w-2 rounded-full bg-white opacity-0 transition-opacity data-[selected]:opacity-100"></span>
			</span>
		</button>
		<button
			class="h-6 w-6 rounded-full transition-all hover:scale-110 relative flex items-center justify-center"
			style="background-color: oklch(0.637 0.237 25.331);"
			data-theme="red"
			title="Red"
		>
			<span class="absolute inset-0 flex items-center justify-center">
				<span class="h-2 w-2 rounded-full bg-white opacity-0 transition-opacity data-[selected]:opacity-100"></span>
			</span>
		</button>
		<button
			class="h-6 w-6 rounded-full transition-all hover:scale-110 relative flex items-center justify-center"
			style="background-color: oklch(0.645 0.246 16.439);"
			data-theme="rose"
			title="Rose"
		>
			<span class="absolute inset-0 flex items-center justify-center">
				<span class="h-2 w-2 rounded-full bg-white opacity-0 transition-opacity data-[selected]:opacity-100"></span>
			</span>
		</button>
		<button
			class="h-6 w-6 rounded-full transition-all hover:scale-110 relative flex items-center justify-center"
			style="background-color: oklch(0.705 0.213 47.604);"
			data-theme="orange"
			title="Orange"
		>
			<span class="absolute inset-0 flex items-center justify-center">
				<span class="h-2 w-2 rounded-full bg-white opacity-0 transition-opacity data-[selected]:opacity-100"></span>
			</span>
		</button>
		<button
			class="h-6 w-6 rounded-full transition-all hover:scale-110 relative flex items-center justify-center"
			style="background-color: oklch(0.723 0.219 149.579);"
			data-theme="green"
			title="Green"
		>
			<span class="absolute inset-0 flex items-center justify-center">
				<span class="h-2 w-2 rounded-full bg-white opacity-0 transition-opacity data-[selected]:opacity-100"></span>
			</span>
		</button>
		<button
			class="h-6 w-6 rounded-full transition-all hover:scale-110 relative flex items-center justify-center"
			style="background-color: oklch(0.623 0.214 259.815);"
			data-theme="blue"
			title="Blue"
		>
			<span class="absolute inset-0 flex items-center justify-center">
				<span class="h-2 w-2 rounded-full bg-white opacity-0 transition-opacity data-[selected]:opacity-100"></span>
			</span>
		</button>
		<button
			class="h-6 w-6 rounded-full transition-all hover:scale-110 relative flex items-center justify-center"
			style="background-color: oklch(0.795 0.184 86.047);"
			data-theme="yellow"
			title="Yellow"
		>
			<span class="absolute inset-0 flex items-center justify-center">
				<span class="h-2 w-2 rounded-full bg-white opacity-0 transition-opacity data-[selected]:opacity-100"></span>
			</span>
		</button>
		<button
			class="h-6 w-6 rounded-full transition-all hover:scale-110 relative flex items-center justify-center"
			style="background-color: oklch(0.606 0.25 292.717);"
			data-theme="violet"
			title="Violet"
		>
			<span class="absolute inset-0 flex items-center justify-center">
				<span class="h-2 w-2 rounded-full bg-white opacity-0 transition-opacity data-[selected]:opacity-100"></span>
			</span>
		</button>
	</div>
}

templ ThemesHandle() {
	{{ handle := templ.NewOnceHandle() }}
	@handle.Once() {
		<script src="/assets/js/themes.js" defer nonce={ templ.GetNonce(ctx) }></script>
	}
}
